<template>
 <div class="hm-input">
   <input :class='[status]' :type="type"  class="inp"  :value="value" :placeholder="placeholder" @input='handleInput'>
   <!-- 校验不通过时,显示提示信息 -->
   <span class="tips" v-show="isShowTips">{{ errMsg }}</span>
 </div>
</template>

<script>
export default {
  data () {
    return {
      // 记录校验是否成功
      status: ''
    }
  },
  // 组件封装时,为了保证组件的稳定性,props一般会加上验证
  // 会验证props的类型,如果不满意,直接报错
  props: {
    placeholder: {
      type: String, // 必须填写,类型
      default: '请输入内容' // 默认值
    },
    type: {
      type: String, // 要求传递过来的 type 属性,是一个string类型
      default: 'text'
    },
    value: {
      type: String,
      default: ''
    },
    rules: {
      type: RegExp
    },
    // "errmsg" :{}
    errMsg: {
      type: String
    }
  },
  methods: {
    handleInput (e) {
      // 输入框修改了,希望value值能同步修改
      // 这是子传父
      const value = e.target.value
      this.$emit('input', value)

      // 没有校验规则,直接 return
      if (!this.rules) return

      if (this.rules.test(value)) {
        this.status = 'success' // 成功
      } else {
        this.status = 'error' // 失败
      }
    }
  },
  // 使用计算属性
  computed: {
    isShowTips () {
    // 状态是 error(校验失败), 并且存在错误信息,才会显示提示
      return this.status === 'error' && this.errMsg
    }
  }
}
</script>

<style lang="scss" scoped>
.hm-input {
  padding-bottom: 15px;
  position: relative;
  .inp {
    width: 100%;
    height: 38px;
    background-color: transparent;
    border-bottom: 1px solid #666;
    font-size: 18px;

    &.error {
     border-color: red;
    }
    &.success {
      border-color: green;
    }
  }
  .tips {
    color: red;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
